<template>
	<el-row class="page" :gutter="12">
		<el-col class="feedback" :span="15">
			<div class="block" v-loading="loading_l">
				<div class="b-head yj-space-between">
					<span>{{total}} 反馈意见</span>
					<div class="head-right">
						<el-select v-model="company_id" placeholder="查询公司" style="margin-right: 10px"></el-select>
						<el-select v-model="status" placeholder="查询状态">
							<el-option value="待审核" label="待审核"></el-option>
							<el-option value="正在处理" label="正在处理"></el-option>
							<el-option value="正在测试" label="正在测试"></el-option>
							<el-option value="已上线" label="已上线"></el-option>
						</el-select>
					</div>
				</div>
				<div class="b-navbar yj-space-between">
					<div class="nav-box">
						<span class="nav-item active">按时间排序</span>
						<span class="nav-item">按热度排序</span>
					</div>
					<el-pagination
						@current-change="handleCurrentChange"
						:current-page="page_num"
						:page-size="size"
						layout="total, prev, pager, next"
						:total="total">
					</el-pagination>
				</div>
				<div class="b-lists">
					<div class="list-item" v-for="(item,index) in feedbackData">
						<img class="user-face" :src="item.avatar || avatar" alt="">
						<div class="user-info">
							<div class="name">
								<span style="margin-right: 20px;">{{item.name}}</span>
								<span>{{item.title}}</span>
							</div>
							<div class="text">{{item.content}}</div>
							<div class="imgs">
								<el-image 
									class="imgs-item" 
									fit="cover"
									v-for="(img, idx) in item.images"
									 :src="img" 
									:previewSrcList="item.images"
									:key="idx">
									<div slot="error" class="image-slot">
										<i class="el-icon-picture-outline"></i>
									</div>
								</el-image>
							</div>
							<div class="info">
								<span class="mr-20">来自 {{item.community_name}}</span>
								<span class="mr-20">{{item.add_time}}</span>
								<span class="check" title="查看评论">评论（5）</span>
								<span class="delete">
									<span class="mr-20">{{item.status}}</span>
									<i class="el-icon-delete"></i> 删除
								</span>
							</div>
						</div>
					</div>
				</div>
				<el-pagination
					class="foot-page"
					background
					@current-change="handleCurrentChange"
					:current-page="page_num"
					:page-size="size"
					layout="prev,pager,next,total,jumper"
					:total="total">
				</el-pagination>
			</div>
		</el-col>
		<el-col class="other" :span="9">
			<div class="block">
				
			</div>
		</el-col>
	</el-row>
</template>

<script>
	import { apiIssue } from '@/api'
	export default{
		data(){
			this.avatar = require('@/assets/img/img.png')
			return{
				loading_l: false,
				feedbackData: [],
				
				page_num: 1,
				size: 20,
				total: 400,
				
				company_id: '',
				status: '',
			}
		},
		created() {
			this.getIssue();
		},
		methods:{
			handleCurrentChange(val){
				this.page_num = val;
				this.getIssue(1)
			},
			
			getIssue(isPage){
				if(!isPage){ this.page_num = 1;}
				this.loading_l = true;
				let obj = {
					company_id: this.company_id,
					status: this.status,
					page_num: this.page_num,
					size: this.size
				}
				apiIssue(obj).then(res => {
					if(res.data.code == 0){
						let data = res.data.data || {};
						this.feedbackData = data.data_list || [];
						this.total = data. total || 0;
					}
				}).finally(() => {
					this.loading_l = false;
				})
			},
		}
	}
</script>

<style scoped>
	.page{
		width: auto;
		padding: 12px;
	}
	.mr-20{
		margin-right: 20px;
	}
	.feedback,.other{
		height: 100%;
	}
	.block{
		width: 100%;
		height: 100%;
		overflow-y: auto;
		background-color: #fff;
	}
	.b-head{
		padding: 1rem;
		font-size: 1.125rem;
	}
	.b-navbar{
		margin: 0 1rem;
		border-bottom: 1px solid #e5e9ef;
	}
	.nav-box{
		font-size: 0.875rem;
		font-weight: 700;
	}
	.nav-item{
		position: relative;
		display: inline-block;
		padding: 0.5rem 0;
		margin-right: 1rem;
		cursor: pointer;
		margin-bottom: -4px;
		border-bottom: 1px solid transparent;
		overflow: hidden;
	}
	.nav-item+.nav-item{
		margin-lfet: 1rem;
	}
	.nav-item:hover{
		color: #00a1d6;
	}
	.nav-item.active{
		border-bottom: 1px solid #00a1d6;
		color: #00a1d6;
	}
	.nav-item.active::before{
		content: '';
		position: absolute;
		bottom: -1px;
		left: 50%;
		margin-left: -2px;
		border: 4px solid transparent;
		border-bottom-color: #00a1d6;
	}
	.b-navbar /deep/ .number{
		min-width: 0;
	}
	.b-navbar /deep/ .el-pagination__total{
		margin-right: 0;
	}
	.b-navbar /deep/ .el-pagination .btn-prev {
    padding-right: 0;
	}
	.b-navbar /deep/ .el-pagination .btn-next {
    padding-left: 0;
	}
	.head-right /deep/ .el-select{
		width: 120px;
	}
	
	.user-face{
		float: left;
		margin: 24px 0 0 1rem;
		width: 3rem;
    height: 3rem;
		border-radius: 50%;
	}
	.user-info{
		position: relative;
		margin-left: 85px;
		margin-right: 12px;
		padding: 22px 0 14px;
		border-bottom: 1px solid #e5e9ef;
		font-size: 0.75rem;
	}
	.name{
		color: #6d757a;
		line-height: 1.125rem;
		padding-bottom: 4px;
	}
	.text{
		font-size: 0.875rem;
		color: #222;
		line-height: 1.25rem;
		padding: 2px 0;
	}
	.info{
		position: relative;
		color: #99a2aa;
		line-height: 1.625rem;
	}
	.check{
		display: inline-block;
		padding: 0 4px;
		border-radius: 2px;
		cursor: pointer;
	}
	.check:hover{
		background: #e5e9ef;
		color: #00a1d6;
	}
	.delete{
		position: absolute;
		right: 4px;
		cursor: pointer;
		line-height: 1.625rem;
		color: #f37575;
	}
	.imgs{
		width: 100%;
		overflow-x: auto;
		padding: 4px 0;
	}
	.imgs-item{
		width: 7.5rem;
		height: 7.5rem;
	}
	/deep/ .image-slot{
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 100%;
		background: #f5f7fa;
		color: #909399;
		font-size: 14px;
	}
	.foot-page{
		padding: 12px;
	}
</style>
